<template>
  <view class="container">
    <!-- 用户信息 -->
    <view class="user" :style="{ paddingTop: statusBarHeight + navBarHeight + 'px' }">
      <view class="user-top">
        <view class="user-top-left">
          <image :src="userInfo.avatar_url ? userInfo.avatar_url : '/static/image/account.png'"></image>
          <view class="user-info" v-if="userInfo.id">
            <text class="nickname">{{ userInfo.nickname }}</text>
            <text class="phone">{{ userInfo.phone }}</text>
          </view>
          <view class="user-info" v-else @click="goLogin()">
            <text class="nickname">去登录</text>
          </view>
        </view>
        <view class="user-top-right" v-if="userInfo.id">
          <image @click="toSetting" src="/static/image/setting.png"></image>
        </view>
      </view>

    </view>
    <view class="content">
      <!-- 订单 -->
      <view class="order">
        <view class="order-top">
          <text class="order-top-txt">我的订单</text>
          <view class="order-top-all" @click="toOrder('all')">
            <text>全部订单</text>
          </view>
        </view>
        <view class="order-bottom">
          <view v-for="item in tabList" class="order-bottom-item" @click="toOrder(item.id)">
            <image :src="item.icon"></image>
            <text>{{item.name}}</text>
          </view>
        </view>
      </view>

      <!-- 我的服务 -->
      <view class="service">
        <view class="service-top">
          <text class="service-top-txt">我的服务</text>
        </view>
        <view class="service-bottom">
          <view class="service-bottom-item" @click="toAddress()">
            <image src="/static/icon/address.png"></image>
            <text>我的地址</text>
          </view>
          <!--					<view class="service-bottom-item" @click="toFootprint()">-->
          <!--						<image src="/static/icon/service/footprint.png"></image>-->
          <!--						<text>浏览记录</text>-->
          <!--					</view>-->
          <view class="service-bottom-item" @click="toCollect()">
            <image src="/static/icon/comment.png"></image>
            <text>我的评价</text>
          </view>
          <!--					<view class="service-bottom-item">-->
          <!--						<image src="/static/icon/service/service.png"></image>-->
          <!--						<text>我的优惠券</text>-->
          <!--					</view>-->
          <view class="service-bottom-item" >
            <button class="contact" type="default" open-type="contact"></button>
            <image src="/static/icon/kefu.png"></image>
            <text>在线客服</text>
          </view>
        </view>
      </view>

      <!-- 退出登录按钮 -->
      <view class="logout-btn" v-if="userInfo.id" @click="handleLogout">
        退出登录
      </view>

    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navBarHeight: 0,
      statusBarHeight: 0,
      list: [

      ],
      userInfo: {},
      tabList:[
        {name:'待支付',id:'pay', icon: '/static/image/pay.png'},
        {name:'待接单',id:'wait', icon: '/static/image/wait.png'},
        {name:'待服务',id:'get', icon: '/static/image/get.png'},
        {name:'已完成',id:'finish', icon: '/static/image/finish.png'},
        {name:'退款/售后',id:'refund', icon: '/static/image/refund.png'},
      ],
    };
  },
  onLoad() {
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
    // #ifdef MP-WEIXIN
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    this.navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - systemInfo.statusBarHeight) * 2
    // #endif
    // #ifdef H5
    this.navBarHeight = 44
    // #endif
  },
  onShow() {
    this.userInfo = uni.getStorageSync('userInfo') || {}
  },
  methods: {
    // 跳转我的订单页面
    toOrder(type) {
      if (!this.userInfo.id) {
        uni.showModal({
          title: '提示',
          content: '请登录',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '../login/login'
              })
            }
          }
        })
        return
      }
      uni.switchTab({
        url: '/pages/order/list'
      })
      uni.setStorageSync('orderType', type)
    },
    // 跳转设置页面
    toSetting() {
      if (!this.userInfo.id) {
        uni.showModal({
          title: '提示',
          content: '请登录',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '../login/login'
              })
            }
          }
        })
        return
      }
      uni.navigateTo({
        url: '/pages/user/myinfo'
      })
    },
    // 跳转地址页面
    toAddress() {
      if (!this.userInfo.id) {
        uni.showModal({
          title: '提示',
          content: '请登录',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '../login/login'
              })
            }
          }
        })
        return
      }
      uni.navigateTo({
        url: '/pages/user/address/list'
      })
    },
    // 跳转足迹页面
    toFootprint() {
      if (!this.userInfo.id) {
        uni.showModal({
          title: '提示',
          content: '请登录',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '../login/login'
              })
            }
          }
        })
        return
      }
      uni.navigateTo({
        url: '/pages/mine/footprint'
      })
    },
    toJoin() {
      if (!this.userInfo.id) {
        uni.showModal({
          title: '提示',
          content: '请登录',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '../login/login'
              })
            }
          }
        })
        return
      }
      uni.navigateTo({
        url: '/pages/partner/apply'
      })
    },
    // 跳转收藏页面
    toCollect() {
      if (!this.userInfo.id) {
        uni.showModal({
          title: '提示',
          content: '请登录',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '../login/login'
              })
            }
          }
        })
        return
      }
      uni.navigateTo({
        url: '/pages/user/comment/comment'
      })
    },
    // 跳转登录页面
    goLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      })
    },
    // 跳转余额明细页面
    goBalance() {
      uni.navigateTo({
        url: '/pages/mine/balance'
      })
    },
    // 跳转积分明细页面
    goScore() {
      uni.navigateTo({
        url: '/pages/mine/score'
      })
    },
    // 退出登录
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除用户信息
            uni.removeStorageSync('userInfo')
            // 清除token
            uni.removeStorageSync('token')
            // 重置用户信息
            this.userInfo = {}
            // 提示
            uni.showToast({
              title: '已退出登录',
              icon: 'success'
            })
          }
        }
      })
    }
  }
}
</script>

<style>
page {
  background: #F8F9FA;
}
</style>

<style lang="scss" scoped>
.content {
  padding: 30rpx;
}

.user {
  border-bottom-left-radius: 60% 15%;
  border-bottom-right-radius: 60% 15%;
  background: #ff6600;
  opacity: 1;
}

.user-top {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .user-top-left {
    display: flex;
    align-items: center;

    image {
      width: 110rpx;
      height: 110rpx;
      border-radius: 50%;
    }

    .user-info {
      display: flex;
      flex-direction: column;
      margin-left: 30rpx;

      .nickname {
        font-size: 32rpx;
        color: #FFFFFF;
      }

      .phone {
        font-size: 24rpx;
        color: #FFFFFF;
        margin-top: 6rpx;
        opacity: 0.8;
      }
    }
  }

  .user-top-right {
    image {
      width: 48rpx;
      height: 48rpx;
    }

    .kefu-icon {
      margin-left: 20rpx;
    }
  }
}

.user-bottom {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: 160rpx;

  .user-bottom-item {
    display: flex;
    flex-direction: column;
    text-align: center;

    .user-bottom-num {
      font-size: 36rpx;
      color: #FFFFFF;
    }

    .user-bottom-txt {
      font-size: 24rpx;
      color: #FFFFFF;
      opacity: 0.8;
    }

  }
}

.order {
  border-radius: 20rpx;
  background: #FFFFFF;
  .order-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;

    .order-top-txt {
      font-size: 28rpx;
      font-weight: 600;
      color: #333333;
    }

    .order-top-all {
      display: flex;
      align-items: center;

      text {
        font-size: 24rpx;
        color: #666666;
      }

      image {
        width: 48rpx;
        height: 48rpx;
      }
    }
  }

  .order-bottom {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-top: 20rpx;
    padding-bottom: 30rpx;

    .order-bottom-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        width: 52rpx;
        height: 52rpx;
      }

      text {
        font-size: 22rpx;
        color: #666666;
        margin-top: 20rpx;
      }
    }
  }
}

.service {
  bservice-radius: 20rpx;
  background: #FFFFFF;
  margin-top: 20rpx;

  .service-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 30rpx 20rpx 30rpx;

    .service-top-txt {
      font-size: 28rpx;
      font-weight: 600;
      color: #333333;
    }

    .service-top-all {
      display: flex;
      align-items: center;

      text {
        font-size: 24rpx;
        color: #666666;
      }

      image {
        width: 70rpx;
        height: 70rpx;
      }
    }
  }

  .service-bottom {
    display: flex;
    align-items: center;
    padding-top: 20rpx;
    padding-bottom: 30rpx;

    .service-bottom-item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      .contact{
        position: absolute;
        width: 100%;
        height: 120rpx;
        top:0;
        left:0;
        opacity: 0;
      }
      image {
        width: 50rpx;
        height: 50rpx;
      }

      text {
        font-size: 22rpx;
        color: #666666;
        margin-top: 20rpx;
      }
    }
  }
}

.recommend {
  margin-top: 50rpx;

  .recommend-title {
    display: flex;
    align-items: center;
    justify-content: center;

    text {
      font-size: 30rpx;
      font-weight: 600;
      color: #333333;
    }

    image {
      width: 40rpx;
      height: 22rpx;
    }

    .recommend-title-l {
      margin-right: 30rpx;
    }

    .recommend-title-r {
      margin-left: 30rpx;
    }
  }

  .recommend-goods {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .goods {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-radius: 20rpx;
      background: #FFFFFF;
      padding: 0rpx 30rpx 30rpx 30rpx;
      margin-top: 30rpx;
    }

    .goods-image {
      width: 280rpx;
      height: 280rpx;
      border-radius: 4px;
    }

    .goods-name {
      width: 274rpx;
      font-size: 26rpx;
      font-weight: 700;
      line-height: 34rpx;
      color: #333333;
      margin-top: 10rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .goods-tag {
      display: flex;
      align-items: center;
      margin-top: 14rpx;
      font-size: 18rpx;

      text:nth-child(1) {
        color: #F55726;
        border: 1px solid #F55726;
        border-radius: 4rpx;
        padding: 0rpx 4rpx;
      }

      text:nth-child(2) {
        color: #40AE36;
        border: 1px solid #40AE36;
        border-radius: 4rpx;
        margin-left: 10rpx;
        padding: 0rpx 4rpx;
      }
    }

    .goods-price {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 14rpx;

      .goods-price-txt {
        color: #F55726;
        font-size: 32rpx;
        font-weight: 600;

        .goods-price-unit {
          font-size: 22rpx;
          color: #999999;
          font-weight: normal;
        }
      }

      .goods-shopcar-icon {
        width: 44rpx;
        height: 44rpx;
        margin-right: 10rpx;
      }
    }
  }
}

.logout-btn {
  margin-top: 40rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: #ff6600;
  border-radius: 20rpx;
  color: #FFFFFF;
  font-size: 32rpx;
}
</style>
